<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络聊天室</title>
    
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/client1.css">
    <link rel="stylesheet" href="css/friend.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
     <!-- 加载动画-->
  <div class="loading-screen" id="loadingScreen">
    <div class="loader"></div>
    <div class="loading-text">正在进入聊天室...</div>
  </div> 

    <!-- 聊天室容器 -->
    <div class="client-container">
        <div class="main">
            <!-- 左侧边栏 -->
            <div class="left">
               
                <!-- 修改用户信息区域 -->
                    <!-- 修改用户信息区域 - 保持原有结构但添加按钮 -->
                        <!-- 修改用户信息区域 -->
                        <div class="user">
                            <svg t="1762175684483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21039" width="200" height="200">
                                <!-- SVG路径保持不变 -->
                                <path d="M357.353238 279.350496a278.594155 278.594155 0 0 0 93.216025 208.303966 216.636124 216.636124 0 0 0 62.144016 9.063702c119.836775 0 217.33047-97.493695 217.330471-217.330471S632.550054 61.995228 512.713279 61.995228a216.636124 216.636124 0 0 0-62.181213 9.051303 278.594155 278.594155 0 0 0-93.178828 208.303965z" fill="#515151" p-id="21040"></path>
                                <path d="M511.969336 61.995228c119.836775 0 217.33047 97.493695 217.330471 217.33047s-97.493695 217.318071-217.330471 217.318072-217.33047-97.481296-217.33047-217.293274 97.493695-217.355269 217.33047-217.355268m0-61.995228C357.712811 0.024798 232.668436 125.069173 232.668436 279.350496S357.712811 558.626598 511.969336 558.626598s279.3009-125.044374 279.300901-279.276102S666.275458 0.024798 511.969336 0.024798z" fill="#515151" p-id="21041"></path>
                                <path d="M918.075275 870.784969a424.208546 424.208546 0 0 0-16.961894-46.397228q-5.405984-12.399046-11.580708-24.512913a426.675956 426.675956 0 0 0-125.453543-148.007407 420.935198 420.935198 0 0 0-252.618154-83.321586 430.246881 430.246881 0 0 0-48.356278 2.715391c-166.14721 67.921972-283.181801 231.167805-283.181802 421.741135h756.007005a425.113676 425.113676 0 0 0-17.854626-122.217392z" fill="#515151" p-id="21042"></path>
                                <path d="M238.694372 659.641623a30.997614 30.997614 0 0 1-18.598568-55.795705 482.335271 482.335271 0 0 1 35.275285-24.16574 31.001334 31.001334 0 1 1 32.73348 52.658746c-10.588785 6.583893-20.954387 13.63895-30.799229 21.078378a30.836426 30.836426 0 0 1-18.610968 6.224321zM56.527595 1023.999975a30.997614 30.997614 0 0 1-30.997614-30.997614A486.042586 486.042586 0 0 1 146.011507 672.549029a30.997614 30.997614 0 1 1 46.620411 40.854855A424.047358 424.047358 0 0 0 87.537608 993.01476a30.997614 30.997614 0 0 1-31.010013 30.985215zM967.411078 1023.999975a30.997614 30.997614 0 0 1-30.997614-30.997614 422.113107 422.113107 0 0 0-34.804121-168.627019q-5.405984-12.399046-11.580709-24.512913a426.688355 426.688355 0 0 0-125.453543-147.995008 425.287263 425.287263 0 0 0-407.035867-54.357416 30.997614 30.997614 0 1 1-22.553864-57.717557 487.146101 487.146101 0 0 1 466.514089 62.305204 487.877644 487.877644 0 0 1 143.754534 169.494953q7.067456 13.800138 13.279378 28.096237a484.319118 484.319118 0 0 1 39.912528 193.276322 30.997614 30.997614 0 0 1-31.034811 31.034811z" fill="#515151" p-id="21043"></path>
                            </svg>
                            
                            <!-- 用户名显示区域 -->
                            <span class="user-name"></span>
                            
                            <!-- 操作按钮容器 - 确保这部分存在 -->
                            <!-- 在 .user-actions 部分修改按钮 -->
                                <div class="user-actions">
                                    <button class="custom-btn add-friend-btn" id="add-friend-page-btn" title="新增好友">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                    <button class="custom-btn friend-requests-btn" id="friend-requests-btn" title="好友申请">
                                        <i class="fas fa-user-friends"></i>
                                        <span class="notification-badge hide" id="friend-requests-badge">0</span>
                                    </button>
                                </div>
                        </div>

                <!-- 这是搜索框 -->
                        <div class="search">
                            <!-- 搜索框中的输入框 -->
                            <input type="text" placeholder="搜索好友" id="search-friend-input">
                            <!-- 点击按钮进行搜索 -->
                            <button id="search-friend-btn"><i class="fas fa-search"></i></button>
                            
                            <!-- 搜索结果面板 - 确保初始状态为隐藏 -->
                            <div class="search-results-panel hide" id="search-results-panel" style="display: none;">
                                <div class="search-results-header">
                                    <span>搜索结果</span>
                                    <button class="close-search-results" id="close-search-results">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                                <ul class="search-results-list" id="search-results-list">
                                    <!-- 搜索结果将在这里动态显示 -->
                                </ul>
                            </div>
                        </div>

                <!-- 标签页 -->

                <!-- 修改标签页 -->
                    <div class="tab">
                        <div class="tab-session"><i class="fas fa-comment"></i> 会话
                        </div>
                        <div class="tab-friend"><i class="fas fa-user-friends"></i> 好友
                        </div>
                    </div>
 
                <ul class="list" id="session-list">
                    <!-- 会话列表项将通过JS动态生成 -->
                </ul>
                <!-- 好友列表 -->
                <ul class="list hide" id="friend-list">
                    <!-- 好友列表将通过JS动态生成 -->
                </ul>
            </div>

            <!-- 右侧聊天区域 -->
            <div class="right">
                <div class="title" id="chat-title">
                    <span>选择一个会话开始聊天吧</span>
                </div>
                <div class="message-show" id="message-show">
                    <div class="welcome-message">
                        <div style="text-align: center; padding: 40px; color: #7a9a9a;">
                            <i class="fas fa-comments" style="font-size: 60px; margin-bottom: 20px;"></i>
                            <h2>欢迎使用网络聊天室</h2>
                            <p>选择会话或是好友开始聊天吧~</p>
                        </div>
                    </div>
                </div>

              
                <!--拓展功能-->
                <!-- 表情面板 -->  

                <div class="emoji-panel" id="emoji-panel">
                    <div class="emoji-header">
                        <span>选择表情</span>
                        <button class="close-emoji"><i class="fas fa-times"></i></button>
                    </div>
                    <div class="emoji-container" id="emoji-container">
                        <!-- 表情将通过JS动态生成 -->
                    </div>
                </div>
                
                <!-- 消息输入区域 -->
                <div class="message-input-container">
                    <!-- 工具栏 -->
                    <div class="toolbar">
                        <button class="tool-btn" id="emoji-btn" title="表情">
                            <i class="far fa-smile"></i>
                        </button>
                        <button class="tool-btn" id="image-btn" title="发送图片">
                            <i class="far fa-image"></i>
                        </button>
                        <button class="tool-btn" id="file-btn" title="发送文件">
                            <i class="far fa-file"></i>
                        </button>
                    </div>
                    
                    <!-- 隐藏的文件输入 -->
                    <input type="file" id="file-input" class="hide" accept="*/*">
                    <input type="file" id="image-input" class="hide" accept="image/*">
                    
                    <!-- 消息输入框 -->
                    <textarea class="message-input" placeholder="选择一个会话开始聊天..." id="message-input" disabled></textarea>
                    
                    <!-- 发送按钮 -->
                    <div class="ctrl">
                        <button id="send-btn" disabled>发送</button>
                    </div>
                </div>
                
                <!-- 上传进度条 -->
                <div class="upload-progress" id="upload-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" id="progress-fill"></div>
                    </div>
                    <span class="progress-text" id="progress-text">上传中: 0%</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加好友模态框 -->
    <!-- 修改添加好友模态框 -->
        <div class="modal-overlay hide" id="add-friend-modal">
            <div class="modal" style="max-width: 500px;">
                <div class="modal-header">
                    <h3>添加好友</h3>
                    <button class="close-modal" id="close-add-friend-modal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="search-user" style="margin-bottom: 20px;">
                        <input type="text" id="search-user-input" placeholder="请输入您要添加好友的用户名">
                        <button id="search-user-btn"><i class="fas fa-search"></i> 搜索</button>
                    </div>
                    <div class="search-results-container" id="search-results-container" style="max-height: 300px; overflow-y: auto;">
                        <!-- 搜索结果将在这里显示 -->
                        <div class="no-results" id="no-results-message" style="text-align: center; color: #7a9a9a; padding: 20px;">
                            请输入用户名搜索好友
                        </div>
                        <div class="search-results" id="search-results">
                            <!-- 匹配的用户列表将动态生成在这里 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- 好友请求模态框 -->
    <div class="modal-overlay hide" id="friend-requests-modal">
        <div class="modal">
            <div class="modal-header">
                <h3>好友请求</h3>
                <button class="close-modal" id="close-friend-requests-modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="friend-requests-list" id="friend-requests-list">
                    <!-- 好友请求将在这里显示 -->
                </div>
            </div>
        </div>
    </div>


     <!-- 引入 jquery, 注意, 这个引入操作要在使用之前! 否则会找不到相关函数的定义 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
    <script src="js/client1.js"></script>
    <script src="js/addFriend.js"></script>
</html>